<template>
  <n-tag :type="badgeType" size="small" round :bordered="false">
    {{ statusText }}
  </n-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NTag } from 'naive-ui'
import { FeatureRequestStatus } from '@/api/types/feature'

const props = defineProps({
  status: {
    type: Number,
    required: true,
    validator: (value: number) => {
      return Object.values(FeatureRequestStatus).includes(value);
    }
  },
  customText: {
    type: String,
    default: ''
  }
})

// 根据状态映射显示文本
const statusText = computed(() => {
  if (props.customText) return props.customText;
  
  const statusMap: Record<number, string> = {
    [FeatureRequestStatus.PENDING]: '待审核',
    [FeatureRequestStatus.APPROVED]: '已批准',
    [FeatureRequestStatus.REJECTED]: '已拒绝',
    [FeatureRequestStatus.IN_PROGRESS]: '开发中',
    [FeatureRequestStatus.COMPLETED]: '已完成',
    [FeatureRequestStatus.PLANNED]: '计划中'
  };
  
  return statusMap[props.status] || '未知状态';
});

// 根据状态映射标签类型
const badgeType = computed(() => {
  type TagType = 'default' | 'success' | 'error' | 'warning' | 'primary' | 'info';
  
  const typeMap: Record<number, TagType> = {
    [FeatureRequestStatus.PENDING]: 'default',
    [FeatureRequestStatus.APPROVED]: 'info',
    [FeatureRequestStatus.REJECTED]: 'error',
    [FeatureRequestStatus.IN_PROGRESS]: 'warning',
    [FeatureRequestStatus.COMPLETED]: 'success',
    [FeatureRequestStatus.PLANNED]: 'primary'
  };
  
  return typeMap[props.status] || 'default';
});
</script>

<style scoped>
/* 当需要自定义样式时可以在这里添加 */
</style> 